<script setup lang="ts">
import { ref } from 'vue';
import type { ChannelItem, ChannelResData } from '@/types/data';
import axios from 'axios';
import { useChannelStore } from '@/store/channel';

const store = useChannelStore()

const channelList = ref<ChannelItem[]>([])
const getChannels = async () => {
    const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
    channelList.value = res.data.data.channels
    // console.log(channelList.value);
}
getChannels()

const changeNav = (id: number) => {
    store.channelId = id
}

</script>

<template>
    <div class="channel-nav">
        <nav class="list">
            <a class="item" :class="{ active: item.id === store.channelId }" href="javascript:;"
                v-for="item in channelList" :key="item.id" @click.prevent="changeNav(item.id)">
                {{ item.name }}
            </a>
        </nav>
    </div>
</template>